<template>
	<view class="container">
		<uni-indexed-list :options="managerList" :showSelect="false" @click="onclick"></uni-indexed-list>
		<view class="tip">
			<u-divider text="主管只能选择一位"></u-divider>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		api_employee_list,
	} from "../../../../../apis/apis.js"
	import {
		useMainStore
	} from '@/utils/store.js';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		pinyin
	} from "pinyin-pro";


	const store = ref(useMainStore());

	const managerList = ref([]); //主管列表
	const selectManager = ref([])


	// 将名字转换为首字母
	function getFirstLetter(name) {
		return pinyin(name, {
			pattern: 'first',
			toneType: 'none',
		})[0].toUpperCase();
	}


	//点击一个成员
	const onclick = (e) => {
		console.log("点击了", e);
		// selectManager.value = e.select;
		store.value.set_selectedManager(e.item);
		uni.navigateBack({
			delta: 1,
			succes() {
				uni.showToast({
					title: "完成!",
					icon: 'success'
				});
			}
		});
	};


	// 处理接口返回的数据
	onLoad(async () => {
		try {
			let res = await api_employee_list({
				jobId: 3
			});
			if (res.data && res.data.length > 0) {
				// 创建一个映射，用于存储每个字母对应的主管对象列表
				const letterMap = {};
				res.data.forEach(item => {
					const firstLetter = getFirstLetter(item.name);
					if (!letterMap[firstLetter]) {
						letterMap[firstLetter] = [];
					}
					letterMap[firstLetter].push({
						id: item.id,
						name: item.name
					});
				});

				// 将映射转换为所需的格式
				const processedList = Object.keys(letterMap).sort().map(letter => ({
					letter,
					data: letterMap[letter].sort((a, b) => a.name.localeCompare(b.name))
				}));

				managerList.value = processedList;
				console.log(managerList.value);
			}
		} catch (e) {
			uni.showToast({
				title: e.msg,
				icon: "none"
			});
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;

		.tip {
			margin-left: 25rpx;
			width: 700rpx;
			position: absolute;
			bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		}

		.btn {
			width: 700rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-left: 25rpx;
			overflow: hidden;
			background-color: $primary-color;
			font-family: Alibaba_PuHuiTi_Regular;
			font-weight: 400;
			font-size: 38rpx;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			// margin-top: 50rpx;
			position: absolute;
			bottom: calc(env(safe-area-inset-bottom) + 10rpx);
		}

	}
</style>